

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="/agent/js/jquery.1.9.1.js" ></script>
<link href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css" rel="stylesheet" >
<script type="text/javascript" src="/agent/js/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="/agent/css/layer.css" />
<title>讲座生成</title>
</head>
<style>
    .type1,.type2,.type3{display: none;}
    .weui-btn_reset{border: none;background-color: #fff;outline: none;}
    .weui-textarea{height: 150px;}
    .weui-cells{margin-top: 10px!important;}
    .weui-cell-date:before{border-top: none;}
</style>
<style>
.pingzheng{
  height: 100px;
  border-bottom: 1px solid #E8E8E8;
  border-top: 1px solid #E8E8E8;
  background: #fff;

}
.pingzheng p{
  height: 10px;
  line-height: 10px;
  padding: 10px 10px 0 16px;
}
.pingzheng p span{
  color: #f3494c;
  float: right;
}
.upload{
  width: 10px;
  height: 10px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  color: #999;
  text-align: center;
  /*line-height: 0.9rem;*/
  font-size: 10px;
}
.z_file em{
  display: block;
  color: #999;
  font-size: 10px;
  font-style: normal;
  position: absolute;
  left: 32%;
  top: 60%;
}
.z_photo {
  width: 100px;
  height: auto;
  padding: 16px 16px 66px 16px;
  overflow: auto;
  clear: both;
}

.z_photo img {
  width: 50px;
  height: 50px;
}

.z_addImg {
  float: left;
  margin-right: 5px;
}
img.img_close{
  width: 5px;
  height: 5px;
  position: absolute;
  top: -5px;
  right: -5px;
}
.z_file {
  width: 50px;
  height: 50px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  float: left;
  margin-right: 2px;
  position: relative;
}
.z_file span{
  position: absolute;
  color: #999;
  font-size: 20px;
  left: 36%;
  top: 3%;
}
.z_file input::-webkit-file-upload-button {
  width: 10px;
  height: 10px;
  border: none;
  position: absolute;
  outline: 0;
  opacity: 0;
}

.z_file input#file {
  display: block;
  width: 10px;
  height: 10px;
  border: 0;
  vertical-align: middle;
}
.headerBox{
  width: 10px;
  height: 10px;
  position: relative;
  background-size: 100% 100%;
  float: left;
  margin-right: 0.2rem;
}
.imgBox{
  width: 100%;
  height: 100%;
  
}
img.img_close{
     width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    right: -45px;
}
</style>
<body ontouchstart="">

    <div class="pingzheng">
              <p>二维码</p>
              <div class="z_photo">
                  <div class="z_file" data-id="1" onclick="fileSelect($(this));">
                      <span>+</span>
                      <em class="number">0/1</em>
                  </div>
                  <input type="file" hidden="hidden" name="file[]" id="file_1" onchange="uploadFile();" value="" accept="image/*" multiple  />
                
                  <input type="hidden" name="file_base[]" id="file_base_1" value=""    />
                  <input type="hidden" name="file_base[]" id="file_base_2" value=""    />
                  <input type="hidden" name="file_base[]" id="file_base_3" value=""    />
                  <input type="hidden" name="file_base[]" id="file_base_4" value=""    />
                  <input type="hidden" name="file_base[]" id="file_base_5" value=""    />
              </div>
          </div>
<div class="weui-btn-area">
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="showPicker">提交并生成</a>
</div>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript" class="picker js_show">
   $(function(){
 
      $('#showPicker').click(function(){
         var erweima = $('#file_base_1').val();
          if(erweima == ""||erweima == null){
              layer.open({
                content: '请上传二维码',
                skin: 'msg',
                time: 2 //2秒后自动关闭
              });
              return false;
            }
          var index = layer.open({type: 2});
          $.ajax({
            type: 'post',
            url:"/index/toolposter/generate" ,
            data:{type:'1',erweima:erweima},
            success: function(data){
              console.log(data);
                layer.open({
                  content:data.msg,
                  skin: 'msg',
                  time: 2 //2秒后自动关闭
              });
              layer.close(index);
              if(data.code){
                 setTimeout(function () {
                    window.location.href = data.data;
                 },1000);
              }
             
            }
          });
        });
  
      $('#showIOSDialog1').on('click', function(){
         layer.open({
              content: "例子：讲座时间：2月20日、21日、22日、23日每晚8~9点。2月20日，语文：北京五中徐春老师主讲；2月21日，英语：北京171中学秦建鹏老师主讲；2月22日，数学：北京五中熊丹老师主讲；冲刺阶段对策讲座：全科资讯梁星老师主讲（2月23日）",
              skin: 'msg',
              time: 5 //2秒后自动关闭
            });
      });  
     $('#showIOSDialog2').on('click', function(){
         layer.open({
              content: "例子：2月10日前",
              skin: 'msg',
              time: 5 //2秒后自动关闭
            });
      });
      $('#showIOSDialog3').on('click', function(){
         layer.open({
              content: "例子：2月20日、21日、22日、23日每晚8~9点。",
              skin: 'msg',
              time: 5 //2秒后自动关闭
            });
      });
    });
</script>
<script>
  //点击图片变大
  var number = $('.z_file').attr('data-id');
  function fileSelect() {
    document.getElementById('file_'+number).click();
  }
  function uploadFile()
  {
    var index = layer.open({type: 2});
    //var imgUrl = window.URL.createObjectURL(document.getElementById("file_"+number).files[0]);
   var file = document.getElementById("file_"+number).files[0];
   var reader = new FileReader();  
             reader.readAsDataURL(file);  
             reader.onload = function(e){
                    dealImage(this.result,{width:200},function(base){
                        $.ajax({
                                type:'post',
                                url:'/index/toolposter/upload',
                                data:{file:base},
                                success:function (data) {
                                  console.log(data);
                                  if(data.code == 1){
                                     $("#file_base_"+number).val(data.data);
                                     layer.open({
                                        content: '上传成功',
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                      });
                                      var html = '<div class="headerBox">\n' +
                                        '            <img class="img_close" onclick="del($(this))" src="/agent/img/img_close.png"/>' +
                                        '            <img id="imgBox_'+number+'" src="'+data.data+'"/>\n' +
                                        '        </div>\n';
                                         $(".z_photo").prepend(html);
                                          $('.number').text(number +'/1');
                                          number++;
                                          $('.z_file').attr('data-id',number);
                                         
                                          if(number) {
                                            $('.z_file').hide();
                                          }
                                        layer.close(index);
                                       return true;
                                  }else{
                                      layer.open({
                                        content: data.msg,
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                      });
                                      return false;
                                  }
                                }
                              });
                    });
             }  


  }
  function del(thi) {
    thi.parent().remove();
         console.log('@!!!!!!!!!!!!!!'+number);
    number--;
    $('.number').text(number - 1 +'/1');
     console.log('@!!!!!!!!!!!!!!'+number);
    if(number!=2){
      $('.z_file').show();
    }
    $('.z_file').attr('data-id',number);
    $('#file_'+number).val('');
    $('#file_base_'+number).val('');
  }
 function dealImage(path, obj, callback){
         var img = new Image();
         img.src = path;
         img.onload = function(){
          var that = this;
          // 默认按比例压缩
          var w = that.width,
           h = that.height,
           scale = w / h;
           w = that.width;
           h = that.height;
          var quality = 0.7;  // 默认图片质量为0.7
          //生成canvas
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          // 创建属性节点
          var anw = document.createAttribute("width");
          anw.nodeValue = w;
          var anh = document.createAttribute("height");
          anh.nodeValue = h;
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          ctx.drawImage(that, 0, 0, w, h);
          // 图像质量
          if(obj.quality && obj.quality <= 1 && obj.quality > 0){
           quality = obj.quality;
          }
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality );
          // 回调函数返回base64的值
          callback(base64);
         }
        }

</script>
</body>
</html>